<template>
    <div class="content">
        <!-- <HeaderNav></HeaderNav> -->
        <div class="flex-between">
            <el-button type="primary" icon="el-icon-plus">新建文件夹</el-button>
            <div class="flex-between">
                <el-input placeholder="输入文件名称" v-model="queryFileName" clearable></el-input>
                <el-button type="primary" @click="searchFileByName">搜索</el-button>
            </div>
            </div>
            <div class="list-content">
            <el-table :data="tableData" style="width:100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="文件名" >
                    <template slot-scope="scope">
                        <div class="flex-left-center">
                            <img src="../../assets/imgs/file3.png">
                            <span style="margin-left: 10px">{{ scope.row.fileName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="fileSize" label="文件大小"></el-table-column>
                <el-table-column prop="downloadNumber" label="下载量"></el-table-column>
                <el-table-column prop="date" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button @click="downLoadFile(scope.row)" type="text" style="color:#00CCCC;">下载</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div class="bottom-content">
                <el-pagination 
                    :current-page="pageNum" 
                    @current-change="getFileList"
                    background
                    layout="prev, pager, next" 
                    :total="listLength">
                </el-pagination>
            </div>
            </div>
    </div>
</template>
<script>


import API from '@/api'

export default{
    name: 'JobView',
    components: {
        // HeaderNav
    },
    data() {
        return {
            queryFileName: '',
            pageNum: 1,
            pageSize: 10,
            listLength: 0,
            tableData: []
        }
    },
    created() {
        this.getFileList()
    },
    methods: {
        // 按文件名搜索
        searchFileByName() {
            console.log("🌸 >> searchFileByName >> queryFileName", this.queryFileName)
            this.getFileList()
        },
        // 下载文件
        downLoadFile(row) {
            alert("虚拟文件["+row.id+"]下载成功！")
            // console.log("🌸 >> downLoadFile >> row", row.id)
        },

        // 获取文件列表
        getFileList() {
            var params = {
                fileName: this.queryFileName,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            console.log("🌸 >> getFileList >> params", params)
            API.teamwork.getFileList(params).then(({data}) => {
                if (data && data.code === 200) {
                    this.tableData = data.data.rows
                    this.listLength = data.data.total
                }
            })
        }

    }
}
</script>

<style lang="less" scoped>
.content {
    margin: 3.1%;
    .el-input {
        width: 515px;
        margin-right: 7%;
    }
    .list-content {
        margin-top: 30px;
        img {
            width: 18px;
            height: 18px;
            line-height: 30px;
        }
    }
}
.bottom-content {
    text-align: right;
    margin-top: 27px;
}
</style>
